<template>
  <div class="login">
    <div class="close">
      <van-icon name="cross" @click="goBack" />
    </div>
    <div class="logo">
      <van-image width="1.5rem" height="1.5rem" src="imgs/logo.png"></van-image>
    </div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-cell>
          <van-field
            v-if="isAccount"
            v-model="account"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-else
            v-model="mobile"
            name="手机"
            label="手机"
            placeholder="手机"
            :rules="mobileRule"
          />
        </van-cell>
        <van-cell>
          <van-field
            v-if="isAccount"
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-else
            v-model="sms"
            type="text"
            name="sms"
            label="验证码"
            placeholder="验证码"
            :rules="smsRules"
          />
          <van-button
            native-type="button"
            v-if="!isAccount"
            class="codeBtn"
            type="info"
            size="mini"
            @click="sendSms"
            :disabled="isDisabled"
            >{{ !isDisabled ? "获取验证码" : num + "s" }}</van-button
          >
        </van-cell>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
    <span class="tips" @click="isAccount = !isAccount">{{
      !isAccount ? "切换 账户秘密登录" : "切换 手机验证码登录"
    }}</span>
  </div>
</template>

<script>
import * as api from "@/api/index";
import { Toast } from "vant";
export default {
  data() {
    return {
      mobile: "",
      account: "",
      password: "",
      isAccount: true,
      sms: "",
      isDisabled: false,
      num: 10,
      smsRules: [
        { required: true, message: "请填写验证码" },
        { pattern: /\d{4}/, message: "请输入4个字符的验证码" },
        {
          async validator(value) {
            Toast.loading("验证中");
            let ajax = function (options) {
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  if (options.code === "1234") {
                    resolve({ result: "验证码验证成功", msg: "ok" });
                  } else {
                    resolve({ result: "验证码验证失败", msg: "fail" });
                  }
                }, 1000);
              });
            };
            let res = await ajax({ code: value });
            console.log(res);
            Toast.clear();
            if (res.msg == "ok") {
              return true;
            } else {
              return false;
            }
          },
          message: "请填写正确的手机验证码",
        },
      ],
      mobileRule: [
        { required: true, message: "请填写手机" },
        {
          validator(val) {
            return val.length === 11;
          },
          message: "请填写11手机号",
        },
      ],
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    async onSubmit() {
      let res = await this.$store.dispatch("login", {
        account: this.account,
        password: this.password,
      });
      // 根据登录的结果跳转页面
      console.log(res);
      if (res.msg === "操作成功") {
        this.$router.back();
        console.log(this);
      }
    },
    async sendSms(e) {
      let res = await api.getCode({ mobile: this.mobile });
      this.isDisabled = true;
      let timer = setInterval(() => {
        this.num--;
      }, 1000);
      setTimeout(() => {
        clearInterval(timer);
        this.num = 10;
        this.isDisabled = false;
      }, 10000);
      console.log(res);
      if (res.msg === "验证码发送成功") {
        Toast.success(res.msg);
      } else {
        Toast.fail(res.msg);
      }
      e.preventDefault();
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #efefef;
}
.close {
  padding: 0.2rem;
}
.logo {
  margin: 2rem auto;
  width: 1.5rem;
}
.codeBtn {
  position: absolute;
  right: 0;
  bottom: 0.2rem;
  width: 2rem;
}
.tips {
  font-size: 0.4rem;
  color: rgb(168, 167, 167);
  display: block;
  text-align: right;
  padding: 0 0.5rem;
}
</style>
